<template lang="pug">
.view.cp-product-man-level.fix-flex-pos
  .level-wrap
    el-button.btn(
      type="primary", plain,
      v-show="!levelList.length"
      @click="addLevel") 初始化产品层级
    el-table.table(:data="levelList", highlight-current-row, size="mini")
      el-table-column(align="center", show-overflow-tooltip, type="index", label="序号", :fixed="true")
      el-table-column(align="center", show-overflow-tooltip, prop="level", label="层级")
        template(slot-scope="scope")
          span {{ scope.row.level }}
      el-table-column(align="center", show-overflow-tooltip, prop="needLevel", label="需求层级名称")
        template(slot-scope="scope")
          el-input(v-model="scope.row.needLevel", v-show="scope.row.isEdit")
          span(v-text="scope.row.needLevel", v-show="!scope.row.isEdit")
      el-table-column(align="center", show-overflow-tooltip, prop="testLevel", label="测试层级名称")
        template(slot-scope="scope")
          el-input(v-model="scope.row.testLevel", v-show="scope.row.isEdit")
          span(v-text="scope.row.testLevel", v-show="!scope.row.isEdit")
      el-table-column(align="center", label="操作", width="96px")
        template(slot-scope="scope")
          el-tooltip(content="编辑", v-show="!scope.row.isEdit", @click.native="editLevel(scope.$index)")
            i.icon-act.el-icon-edit
          el-tooltip(content="添加", v-show="!scope.row.isEdit", @click.native="addLevel(scope.$index)")
            i.icon-act.el-icon-plus
          el-tooltip(content="删除", v-show="!scope.row.isEdit", @click.native="deleteLevel(scope.$index)")
            i.icon-act.el-icon-delete
          el-tooltip(content="确定", v-show="scope.row.isEdit", @click.native="insertLevel(scope.$index)")
            i.icon-act.el-icon-check
          el-tooltip(content="取消", v-show="scope.row.isEdit", @click.native="cancleLevel(scope.$index)")
            i.icon-act.el-icon-close
</template>

<script>
import validate from '@/utils/validate';
import ProductData from '@/data/product';

const { isEmpty } = validate;

export default {
  name: 'prolevel',
  data() {
    return {
      levelList: [],
      cacheList: []
    };
  },
  methods: {
    // 监听物料列表
    addLevel (index) {
      if (isEmpty(index)) {
        this.levelList.push({ isEdit: true });
      } else {
        this.levelList.splice((index + 1), 0, { isEdit: true });
      }
    },
    editLevel (index) {
      this.cacheList[index] = Object.assign({}, this.levelList[index]);
      this.$set(this.levelList[index], 'isEdit', true);
    },
    deleteLevel (index) {
      this.levelList.splice(index, 1);
      this.cacheList[index] = null;
    },
    insertLevel (index) {
      for (let i = 0; i < this.levelList.length; i++) {
        this.levelList[i].level = i;
      }
      this.levelList[index].isEdit = false;
    },
    cancleLevel (index) {
      if (this.cacheList[index]) {
        this.$set(this.levelList, `${index}`, this.cacheList[index]);
      } else {
        this.deleteLevel(index);
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {
    this.levelList = ProductData.productLevels;
    this.cacheList = this.levelList.slice();
  }
};
</script>

<style lang="sass">
$SEARCHHEIGHT: 104px
$PAGEHEIGHT: 56px
.cp-product-man-level
  .level-wrap
    padding: 16px
    width: 640px
  .btn
    margin-bottom: 16px
</style>
